<template>
  <div
    class="model-box"
    :style="{top:top,left:left,width:modelW,height:modelH,backgroundImage:'url('+borderBg+')'}"
  >
    <ul class="box-device" style="display:flex;" >
      <div>
          <li @click="onSelectall()" style="cursor: pointer;">
           <DeviceItem :checked="checkArr.length==deviceTypes.length"   name="全部" />
          </li>
      </div>
      <div style="display:flex;flex:1;flex-wrap:wrap;">
          <li
          v-for="(item,i) in deviceTypes"
          :key="i"
          @click="onSelect(item.deviceType)"
          class="title-item"
        >
          <DeviceItem :checked="checkArr.indexOf(item.deviceType)>-1" :name="item.deviceName" />
        </li>
      </div>

    </ul>
  </div>
</template>
<script>
import DeviceItem from "@/components/deviceitem";
import { GetDeviceTypeList } from "@/api/device";
import { mapGetters, mapActions } from "vuex";

export default {
  name: "DeviceFilter",
  data() {
    return {
      isLoading: false,
      deviceTypes: [],
      borderBg: require("@/assets/images/bg_device_fliter.png")
    };
  },
  computed: {
    ...mapGetters(["DeviceFilters/getterDeviceArr"]),
    checkArr() {
      return this["DeviceFilters/getterDeviceArr"];
    }
  },
  components: {
    DeviceItem
  },
  watch: {
    leader: function() {
      this.getDeviceTypeList();
    }
  },
  props: {
    modelW: {
      type: String,
      default: "60rem"
    },
    modelH: {
      type: String,
      default: "4.4rem"
    },
    top: {
      type: String,
      default: "50%"
    },
    left: {
      type: String,
      default: "50%"
    },
    title: {
      type: String,
      default: "最新预警信息"
    },
    id: {
      type: [String, Number, Object]
    },
    leader: {
      type: String,
      default: ""
    }
  },
  mounted() {
    this.getDeviceTypeList();
  },
  methods: {
    ...mapActions(["DeviceFilters/GetSliderItemAction"]),
    async getDeviceTypeList() {
      try {
        let params = {
          pageNum: "1",
          pageSize: "20",
          code: this.leader
        };
        if (this.id) {
          Object.assign(params, { id: this.id });
        }
        let deviceList = await GetDeviceTypeList(params);
        var list=[]
        var arr=['消防栓水压监测','消防水箱液位监测','污水井液位监测','水泵房漏水监测','可燃气体报警','小型气象站监测','窖井盖监测','Lora基站','烟感','水表','水浸传感器','水质检测仪','电表','污水流量监测终端']

        arr.map(item=>{
           deviceList.data.map(item1=>{
             if(item1.deviceName==item){
               list.push(item1)
             }
          })
        })

        this.deviceTypes = list;
      } catch (error) {
        console.log(error);
      }
    },
    onSelect(type) {
      console.log(type)
      console.log(this.checkArr)
      this["DeviceFilters/GetSliderItemAction"](type);
      // if (this.checkArr.indexOf(type) > -1) {
      //   this.checkArr.splice(this.checkArr.indexOf(type), 1);
      // } else {
      //   this.checkArr.push(type);
      // }
      this.$emit("onSelect", type, this.checkArr);
    },
    onSelectall(){
      console.log(this.deviceTypes)
      if(this.checkArr.length==this.deviceTypes.length){
        this.deviceTypes.map(item=>{
          this.onSelect(item.deviceType)
        })

      }else{
          this.deviceTypes.map(item=>{
          if(this.checkArr.indexOf(item.deviceType)<0){
          this.onSelect(item.deviceType)
         }
        })
      }
    }
  }
};
</script>

<style lang="less" scoped>
.model-box {
  position: absolute;
  z-index: 1000;
  padding: 0.8rem 0 0.8rem;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  .box-device {
    width: 100%;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-flow: wrap;
    .title-item {
      flex-basis: auto;
      flex-shrink: 0;
      cursor: pointer;
      text-align: left;
    }
  }
  .box-title {
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 18px;
    color: #333;
    position: relative;
    .sp-title {
      color: #e9e9e9;
      margin: 0px 0px 4px 0px;
      font-size: 18px;
    }
    .iconfont.icon-close {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 24px;
      color: #666;
    }
  }
  .box-ctx {
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    box-sizing: border-box;
    .ctx-name {
      text-align: center;
      box-sizing: border-box;
      padding: 20px;
    }
    .ctx-process {
      width: 100%;
      padding: 20px 30px;
      box-sizing: border-box;
      .process-box {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 30px;
        .box-item {
          flex: 1;
          text-align: center;
          position: relative;
          font-size: 18px;
          color: #333;
          .dot {
            position: absolute;
            display: block;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #999;
            box-shadow: 0 0 2px 0px #fff;
          }
          &.active {
            color: #26c9e6;
            .dot {
              background: #26c9e6;
            }
            &:after {
              background: #26c9e6;
            }
            &:first-child:before {
              background: #26c9e6;
            }
          }
          &:after {
            content: "";
            position: absolute;
            top: -12px;
            left: 50%;
            width: 100%;
            height: 2px;
            background: #999;
          }
          &:last-child:after {
            width: 50%;
          }
          &:first-child:before {
            content: "";
            position: absolute;
            top: -12px;
            right: 50%;
            width: 50%;
            height: 2px;
            background: #999;
          }
        }
      }
      .process-name {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 14px;
        margin: 20px auto;
        .label {
          width: 100px;
        }
        .name {
          width: calc(100% - 100px);
        }
      }
    }
  }
  .box-btn {
    width: 100%;
    padding-bottom: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
// .custometable{
//   background-color: transparent;
// }
</style>
